<template>
  <div>
    <!-- 标题 -->
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <div class="mainConHeader">
        <div class="mainConHeaderContent"></div>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="commonTab"
        >
          <el-tab-pane
            :label="item.label"
            :name="item.id"
            v-for="item in list"
            :key="item.id"
          ></el-tab-pane>
        </el-tabs>
        <div>
          <fieldSet :activeName="activeName"></fieldSet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import fieldSet from './fieldSet'
export default {
  name: 'fieldSettingsTab',
  components: {
    fieldSet,
  },
  data() {
    return {
      activeName: '0',
      list: [
        {
          id: '0',
          label: '项目建档字段设置',
        },
        {
          id: '1',
          label: '人员录入字段设置',
        },
      ],
      titleText: '字段设置', //监察端
      titleExplain: '设置对应功能中的必填字段',
    }
  },
  created() {},
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      console.log(event)
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 132px;
  padding: 0;
  &Header {
    position: relative;
    &Content {
      position: absolute;
      left: 130px;
      z-index: 100;
      font-size: 12px;
      color: #666666;
    }
  }
  .topConStyle {
    margin: 0 !important;
  }
}
</style>
